<template>
  <div id="content">
    <div class="search">
      <div class="search_top">
        <input type="text" v-model="searchContent.key" @keydown.enter="send_search('key')">
        <div class="bin_search" @click="send_search('key')">
          <img alt="" src="./image/search.svg">
          <span>搜索</span>
        </div>
      </div>
      <div class="search_body">
        <el-radio-group v-model="searchContent.sort" size="small" text-color="#f3ffff" fill="#409eff"
                        @change="send_search">
          <el-radio-button label="sort1">综合排序</el-radio-button>
          <el-radio-button label="sort2">最多点击</el-radio-button>
          <el-radio-button label="sort3">最新发布</el-radio-button>
          <el-radio-button label="sort4">最多评论</el-radio-button>
          <el-radio-button label="sort5">最多收藏</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="searchContent.words" size="small" text-color="#f3ffff" fill="#409eff"
                        @change="send_search">
          <el-radio-button label="words1">全部字数</el-radio-button>
          <el-radio-button label="words2">100以内</el-radio-button>
          <el-radio-button label="words3">500以内</el-radio-button>
          <el-radio-button label="words4">1000以内</el-radio-button>
          <el-radio-button label="words5">3000以内</el-radio-button>
          <el-radio-button label="words6">5000以内</el-radio-button>
          <el-radio-button label="words7">10000以内</el-radio-button>
          <el-radio-button label="words8">10000以上</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="searchContent.category" size="small" text-color="#f3ffff" fill="#409eff"
                        @change="send_search">
          <el-radio-button label="category1">全部分类</el-radio-button>
          <el-radio-button label="category2">后端</el-radio-button>
          <el-radio-button label="category3">前端</el-radio-button>
          <el-radio-button label="category4">数据库</el-radio-button>
        </el-radio-group>
      </div>
      <div class="search_content">
        <ul>
          <li id="" v-for="(item,index) in search.articles" :key="item.nid" @click="toarticle(item.nid)">
            <img alt="" :src="'/api'+item.cover">
            <div>
              <div class="title">
                <a href="#">{{ item.title }}</a>
              </div>
              <div class="bottom">
                <div class="left">
                  <img alt="" src="./image/eye.svg">
                  <span>{{ item.look_count }}</span>
                </div>
                <div class="right">
                  <img alt="" src="./image/clock.svg">
                  <span>{{ item.change_date }}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="search_bottom">
        <Pagination :total="search.total" :current_page="search.current_page"
                    :num_pages="search.num_pages"></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState, mapMutations} from "vuex";

export default {
  name: "Search",
  data() {
    return {}
  },
  methods: {
    ...mapActions('Search', ['getsearch']),
    ...mapMutations('Search', ['setsearchContent']),
    // 发送搜索请求
    send_search(key) {
      let obj = this.searchContent
      if (key === 'key') {
        obj['sort'] = 'sort1'   // 排序方法
        obj['words'] = 'words1'// 字数
        obj['category'] = 'category1'// 分类
        obj['pag'] = 1//请求页数
        this.setsearchContent(obj)
      }
      this.getsearch(obj)
    },
    // 跳转到文章详情页
    toarticle(id) {
      this.$router.push({
        name: "article",
        params: {
          id,
        }
      })
    }
  },
  mounted() {
    let obj = this.searchContent
    obj['key'] = this.$route.query.key
    this.setsearchContent(obj)
    this.getsearch(this.searchContent)
  },
  computed: {
    ...mapState('Search', ['search', 'searchContent'])
  }
}
</script>

<style lang="less">
#content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0eeee;
}

.search {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 80%;
  margin-top: 55px;

  .search_top {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;

    > input {
      height: 20px;
      width: 400px;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #ccd0d7;

      &:focus {
        border: 1px solid #101010;
      }
    }

    .bin_search {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #00a1d6;
      margin-left: 15px;
      padding: 10px;
      border-radius: 10px;

      img {
        height: 20px;
        width: 20px;
        margin-right: 10px;
      }

      > span {
        color: #ffffff;
      }
    }
  }

  .search_body {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    padding: 15px 0;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;

    .el-radio-button {
      margin-right: 20px;
      margin-bottom: 10px;

      .el-radio-button__inner {
        background-color: #f0eeee;
        border: none;
      }
    }
  }

  .search_content {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;

    > ul {
      display: flex;
      flex-wrap: wrap;

      > li {
        width: 188px;
        margin-right: 30px;
        margin-bottom: 20px;

        > img {
          height: 100px;
          width: 100%;
          border-radius: 5px 5px 0 0;
        }

        > div {
          width: 100%;
          height: 80px;
          border: 1px solid #e7e6e6;
          border-top: none;
          border-radius: 0 0 5px 5px;


          .title {
            height: 45px;
            color: #777;
            padding: 10px 10px 0 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            a {
              font-size: 14px;
            }
          }

          .bottom {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;

            img {
              height: 12px;
              width: 12px;
              margin-right: 5px;
            }

            span {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .search_bottom {
    margin-bottom: 20px;
  }
}
</style>